import "./App.less";
import {
  BrowserRouter,
  Routes,
  Router,
  RouterProvider,
  redirect,
  Route,
  Link,
  createBrowserRouter,
  Outlet,
} from "react-router-dom";
import React from "react";
import Login from "./pages/login";

import { useBreakpoint } from "@ant-design/pro-components";
import { Button, ConfigProvider, Result } from "antd";
import { SmileOutlined } from "@ant-design/icons";
import MainLayout from "./layout/MainLayout";
import DataSource from "./pages/apiManage/detail/dataSource";
import SiteMenu from "./pages/siteMange/detail/menu";
import Api from "./pages/apiManage/detail/api";
import ProjectList from "./pages/apiManage/list";
import SiteList from "./pages/siteMange/list";
import SiteConfig from "./pages/siteMange/detail/config";
import MaterialList from "./pages/materialManage/list";
import ApiCreate from "./pages/apiManage/detail/api/create";
import PageCreate from "./pages/siteMange/detail/menu/create";
import LowCodeDesignPage from "./pages/lowCode/design";
import LowCodePreviewPage from "./pages/lowCode/preview";
import HomeLayout from "./layout/HomeLayout";
import SiteLayout from "./layout/SiteLayout";
import { StyleProvider } from "@ant-design/cssinjs";

function Root() {
  return (
    <>
      {/* all the other elements */}
      <div id="detail">
        <Outlet />
      </div>
    </>
  );
}
const router = createBrowserRouter(
  [
    
    {
      path: "/",
      element: <HomeLayout />,
      children: [
        
        {
          path: "/",
          index: true,
          element: (
            <Result
              icon={<SmileOutlined />}
              title="Great, we have done all the operations!"
            />
          ), // 这是默认页面
        },
        {
          path: "/apiManage",
          element: <ProjectList />,
          
        },
        {
          path: "/siteManage",
          element: <SiteList />,
          
        },
        {
          path: "/materialManage",
          element: <MaterialList />,
          
        },
      ],
    },
    {
      path: "/apiManage",
      element: <MainLayout />,

      errorElement: (
        <Result
          status="500"
          title="页面发生错误"
          subTitle="抱歉，您访问的页面不存在"
          extra={
            <Button
              onClick={() => (location.href = location.port ? "/" : "/admin")}
              type="primary"
            >
              返回首页
            </Button>
          }
        />
      ),
      // loader: rootLoader,
      children: [
        {
          path: ":projectId/home",
          index: true,
          element: (
            <Result
              icon={<SmileOutlined />}
              title="Great, we have done all the operations!"
            />
          ), // 这是默认页面
        },
        {
          path: ":projectId/dataSource",
          element: <DataSource />,
        },
        {
          path: ":projectId/api",
          element: <Api />,
          children:[
            {
              path:"",
              element:<div>sss</div>
            },
            {
            path:':apiId',
            element:<ApiCreate/>
          }]
        },
        // {
        //   path: ":projectId/api/create",
        //   element: <ApiCreate />,
        // },
      ],
    },
    
    {
      path: "/siteManage",
      element: <SiteLayout />,

      errorElement: (
        <Result
          status="500"
          title="页面发生错误"
          subTitle="抱歉，您访问的页面不存在"
          extra={
            <Button
              onClick={() => (location.href = location.port ? "/" : "/admin")}
              type="primary"
            >
              返回首页
            </Button>
          }
        />
      ),
      // loader: rootLoader,
      children: [
        {
          path: ":siteId/home",
          index: true,
          element: (
            <Result
              icon={<SmileOutlined />}
              title="Great, we have done all the operations!"
            />
          ), // 这是默认页面
        },
        {
          path: ":siteId/config",
          element: <SiteConfig />,
        },
        {
          path: ":siteId/menu",
          element: <SiteMenu />,
          children:[
            {
              path:"",
              element: <Result
             status="404"
              title="页面发生错误"
              subTitle="抱歉，您访问的页面不存在"
              extra={
                <Button
                  onClick={() => (location.href = location.port ? "/" : "/admin")}
                  type="primary"
                >
                  返回首页
                </Button>
              }
            />
            },
            {
            path:':menuId',
            element:<PageCreate/>
          }
        ]
        },
        // {
        //   path: ":projectId/api/create",
        //   element: <ApiCreate />,
        // },
      ],
    },
    {
      path:'/lowCode/design/:menuId',
      element:<LowCodeDesignPage/>
    },
    {
      path:'/lowCode/preview/:siteId/*',
      element:<LowCodePreviewPage/>
    },
    {
      path: "/login",
      element: <Login />,
    },
  ],
  { basename: location.port ? "/" : "/admin" }
);

const App = () => {
  const span = useBreakpoint();
  return (
    // <StyleProvider container={document.querySelector('#style') as any}>

    <ConfigProvider
      
      theme={{
        token: {
          colorPrimary: "#87bb2a",
          colorLinkHover: "#95de64",
          colorInfo: "#87bb2a",
          colorLink: "#87bb2a",
          
        },
        components:{
          Menu:{
            
          },
          Layout:{
           siderBg:'#fff'
          }
        }
      }}
    >
      <div style={{ minHeight: "100%" }} className={`device-${span}`}>
        <React.StrictMode>
          <RouterProvider router={router} />
        </React.StrictMode>
        {/* <Routes >
        <Route path='workbench' element={<MainLayout />} >
          <Route path='lottery/budget' element={<LotteryBudget />} />
          <Route path='lottery/setting' element={<LotterySetting />} />
        </Route>
        <Route path='/login' element={<Login />} />
        <Route path='/' element={<MainLayout />} />
      </Routes> */}
      </div>
    </ConfigProvider>
      // </StyleProvider>
  );
};

export default App;
